<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析列表 - 盖世数据智能分析平台</title>
    <!-- 固定样式引入 - 不可修改路径 -->
    <!-- 引入React和ReactDOM -->
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>

    <!-- 引入Material-UI核心依赖 -->
    <script src="/libs/material-ui.development.js"></script>
    <script src="/libs/emotion-react.umd.min.js"></script>
    <script src="/libs/emotion-styled.umd.min.js"></script>

    <!-- 引入Babel用于解析JSX -->
    <script src="/libs/babel.min.js"></script>

    <!-- 引入Material图标（可选） -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="/pages/app.css">
    
    <!-- 引入marked库用于Markdown解析 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/marked/16.1.1/lib/marked.umd.js"></script> -->
    <script src="/libs/marked.umd.js"></script>
</head>

<body>
    <div id="root"></div>

    <!-- 固定脚本引入 - 不可修改路径 -->
    <script type="text/babel" data-type="module">
        // 固定核心库引入
        import iToolX, { iUpload, iUtils, iEmit } from "http://a72dfc24ac69ccae7cf363c09e192c19.editor.aibot.gasgoo.com/editor-ui/client.js?a72dfc24ac69ccae7cf363c09e192c19";
        import clientState from "/pages/clientState.js";

        // 从MUI导入所需组件
        const { 
            Button, 
            Card, 
            CardContent, 
            CardHeader, 
            Typography,
            Table,
            TableBody,
            TableCell,
            TableContainer,
            TableHead,
            TableRow,
            Paper,
            TextField,
            Select,
            MenuItem,
            FormControl,
            InputLabel,
            Box,
            Grid,
            Pagination,
            Chip,
            IconButton,
            Tooltip,
            Alert,
            Snackbar,
            TableSortLabel,
            Dialog,
            DialogTitle,
            DialogContent,
            DialogActions,
            Divider,
            Tabs,
            Tab,
            List,
            ListItem,
            ListItemText,
            ListItemIcon,
            Accordion,
            AccordionSummary,
            AccordionDetails,
            InputAdornment
        } = MaterialUI;

        // 创建React组件
        function App() {
            // 状态管理
            const [contentId, setContentId] = React.useState('');
            const [searchKeyword, setSearchKeyword] = React.useState('');
            const [analysisList, setAnalysisList] = React.useState([]);
            const [total, setTotal] = React.useState(0);
            const [page, setPage] = React.useState(1);
            const [pageSize, setPageSize] = React.useState(10);
            const [contentList, setContentList] = React.useState([]);
            const [contentTitles, setContentTitles] = React.useState({});
            const [stats, setStats] = React.useState({});
            const [loading, setLoading] = React.useState(false);
            const [snackbar, setSnackbar] = React.useState({ open: false, message: '', severity: 'success' });
            const [sortConfig, setSortConfig] = React.useState({ key: 'id', direction: 'asc' });
            const [detailDialogOpen, setDetailDialogOpen] = React.useState(false);
            const [selectedAnalysis, setSelectedAnalysis] = React.useState(null);
            const [selectedContent, setSelectedContent] = React.useState(null);
            const [tabValue, setTabValue] = React.useState(0);

            // 获取URL参数
            React.useEffect(() => {
                const params = new URLSearchParams(window.location.search);
                const contentIdParam = params.get('contentId') || '';
                
                setContentId(contentIdParam);
                
                // 加载内容列表
                loadContentList();
            }, []);

            // 加载分析结构列表
            React.useEffect(() => {
                loadAnalysisList();
                loadStats();
            }, [contentId, searchKeyword, page, pageSize, sortConfig]);

            // 加载内容列表
            const loadContentList = async () => {
                try {
                    const response = await iToolX.modules.contentManager.getContentList(null, '', 1, 100);
                    if (response.code === 200) {
                        setContentList(response.data.list);
                        
                        // 创建内容ID到标题的映射
                        const titlesMap = {};
                        response.data.list.forEach(content => {
                            titlesMap[content.id] = content.title;
                        });
                        setContentTitles(titlesMap);
                    } else {
                        showSnackbar(response.message, 'error');
                    }
                } catch (error) {
                    showSnackbar('加载内容列表失败', 'error');
                }
            };

            // 加载分析结构列表
            const loadAnalysisList = async () => {
                setLoading(true);
                try {
                    const response = await iToolX.modules.analysisManager.getAnalysisList(
                        contentId || undefined, 
                        undefined, 
                        page, 
                        pageSize,
                        searchKeyword
                    );
                    
                    if (response.code === 200) {
                        setAnalysisList(response.data.list);
                        setTotal(response.data.total);
                    } else {
                        showSnackbar(response.message, 'error');
                    }
                } catch (error) {
                    showSnackbar('加载分析结构列表失败', 'error');
                } finally {
                    setLoading(false);
                }
            };

            // 加载统计数据
            const loadStats = async () => {
                try {
                    // 如果contentId存在，则传递contentId参数，否则不传递
                    const response = await iToolX.modules.analysisManager.getAnalysisStats(
                        contentId || undefined, 
                        undefined, 
                        undefined
                    );
                    
                    if (response.code === 200) {
                        setStats(response.data.stats);
                    } else {
                        showSnackbar(response.message, 'error');
                    }
                } catch (error) {
                    showSnackbar('加载统计数据失败', 'error');
                }
            };

            // 查看分析详情
            const handleViewDetail = async (analysis) => {
                setSelectedAnalysis(analysis);
                
                // 获取对应的内容详情
                try {
                    const response = await iToolX.modules.contentManager.getContentDetail(analysis.content_id);
                    if (response.code === 200) {
                        setSelectedContent(response.data);
                        setDetailDialogOpen(true);
                        setTabValue(0); // 重置标签页到第一个
                    } else {
                        showSnackbar(response.message, 'error');
                    }
                } catch (error) {
                    showSnackbar('加载内容详情失败', 'error');
                }
            };

            // 关闭详情弹窗
            const handleCloseDetailDialog = () => {
                setDetailDialogOpen(false);
                setSelectedAnalysis(null);
                setSelectedContent(null);
            };

            // 处理标签页切换
            const handleTabChange = (event, newValue) => {
                setTabValue(newValue);
            };

            // 处理筛选
            const handleFilter = () => {
                setPage(1);
                loadAnalysisList();
                loadStats();
            };

            // 重置筛选
            const handleReset = () => {
                setContentId('');
                setSearchKeyword('');
                setPage(1);
                
                // 更新URL参数
                const url = new URL(window.location);
                url.searchParams.delete('contentId');
                window.history.pushState({}, '', url);
            };

            // 删除分析结构
            const handleDelete = async (id) => {
                if (!window.confirm('确定要删除此分析结构吗？')) {
                    return;
                }
                
                try {
                    const response = await iToolX.modules.analysisManager.deleteAnalysis(id);
                    if (response.code === 200) {
                        showSnackbar('删除成功', 'success');
                        loadAnalysisList();
                        loadStats();
                    } else {
                        showSnackbar(response.message, 'error');
                    }
                } catch (error) {
                    showSnackbar('删除失败', 'error');
                }
            };

            // 处理分页
            const handlePageChange = (event, newPage) => {
                setPage(newPage);
            };

            // 处理每页数量变化
            const handlePageSizeChange = (event) => {
                setPageSize(parseInt(event.target.value));
                setPage(1);
            };

            // 处理排序
            const handleSort = (key) => {
                let direction = 'asc';
                if (sortConfig.key === key && sortConfig.direction === 'asc') {
                    direction = 'desc';
                }
                setSortConfig({ key, direction });
            };

            // 显示提示消息
            const showSnackbar = (message, severity = 'success') => {
                setSnackbar({ open: true, message, severity });
            };

            // 关闭提示消息
            const handleCloseSnackbar = () => {
                setSnackbar({ ...snackbar, open: false });
            };

            // 获取内容标题
            const getContentTitle = (contentId) => {
                // 从映射中获取内容标题
                if (contentTitles[contentId]) {
                    return contentTitles[contentId];
                }
                
                // 如果映射中没有，尝试从contentList中查找
                const content = contentList.find(c => c.id === contentId);
                if (content && content.title) {
                    return content.title;
                }
                
                // 如果都没有找到，返回默认值
                return `内容ID: ${contentId}`;
            };

            // 获取权重颜色
            const getWeightColor = (weight) => {
                if (!weight) return 'default';
                const numWeight = parseFloat(weight);
                if (numWeight >= 90) return 'success'; // 绿色
                if (numWeight >= 80) return 'primary'; // 蓝色
                if (numWeight >= 70) return 'warning'; // 橙色
                return 'error'; // 红色
            };

            // 获取权重标签
            const getWeightLabel = (weight) => {
                if (!weight) return '无权重数据';
                const numWeight = parseFloat(weight);
                if (numWeight >= 90) return '优秀';
                if (numWeight >= 80) return '良好';
                if (numWeight >= 70) return '一般';
                return '较差';
            };

            // 格式化日期
            const formatDate = (dateString) => {
                if (!dateString) return '';
                const date = new Date(dateString);
                return date.toLocaleString();
            };

            // 使用marked库的Markdown渲染函数
            const renderMarkdown = (text) => {
                if (!text) return '';
                
                // 使用marked库解析Markdown
                const html = marked.parse(text);
                
                return { __html: html };
            };

            // 导航菜单
            const renderNavMenu = () => {
                return (
                    <ul className="nav-menu">
                        <li className="nav-item">
                            <a href="/pages/home.html" className="nav-link">首页</a>
                        </li>
                        <li className="nav-item">
                            <a href="/pages/business/sources.html" className="nav-link">抓取源</a>
                        </li>
                        <li className="nav-item">
                            <a href="/pages/business/contentManagement.html" className="nav-link">抓取内容</a>
                        </li>
                        <li className="nav-item">
                            <a href="/pages/business/analysisList.html" className="nav-link active">抓取内容分析</a>
                        </li>
                        <li className="nav-item">
                            <a href="/pages/business/promptTemplateManagement.html" className="nav-link">提示词管理</a>
                        </li>
                        <li className="nav-item">
                            <a href="/pages/business/contentPoolManagement.html" className="nav-link">内容池管理</a>
                        </li>
                    </ul>
                );
            };

            return (
                <div className="page-wrapper">
                    {/* 统一的顶部导航 */}
                    <header className="header">
                        <div className="container nav-container">
                            <a href="/pages/home.html" className="logo">
                                <div className="logo-icon">C</div>
                                盖世数据智能分析平台
                            </a>
                            {renderNavMenu()}
                            <div className="nav-actions">
                                <div className="search-box">
                                    <span className="material-icons search-icon">search</span>
                                    <input type="text" className="search-input" placeholder="搜索..." />
                                </div>
                            </div>
                        </div>
                    </header>

                    {/* 主体内容区 */}
                    <main className="main-content">
                        <div className="container">
                            {/* 筛选模块 */}
                            <Card className="card">
                                <CardContent>
                                    <Typography variant="h6" className="card-title">
                                        筛选条件
                                    </Typography>
                                    <Grid container spacing={2}>
                                        <Grid item xs={12} md={10}>
                                            <TextField
                                                fullWidth
                                                label="搜索（事件、关键词、要点）"
                                                value={searchKeyword}
                                                onChange={(e) => setSearchKeyword(e.target.value)}
                                                InputProps={{
                                                    startAdornment: (
                                                        <InputAdornment position="start">
                                                            <span className="material-icons">search</span>
                                                        </InputAdornment>
                                                    ),
                                                }}
                                            />
                                        </Grid>
                                        <Grid item xs={12} md={2} className="btn-group">
                                            <Button 
                                                className="btn btn-primary"
                                                onClick={handleFilter}
                                            >
                                                搜索
                                            </Button>
                                            <Button 
                                                className="btn"
                                                onClick={handleReset}
                                            >
                                                重置
                                            </Button>
                                        </Grid>
                                    </Grid>
                                </CardContent>
                            </Card>

                            {/* 统计模块 */}
                            <Card className="card">
                                <CardContent>
                                    <Typography variant="h6" className="card-title">
                                        统计数据 {contentId ? `(内容: ${getContentTitle(parseInt(contentId))})` : ''}
                                    </Typography>
                                    <Grid container spacing={2}>
                                        <Grid item xs={12} md={3}>
                                            <div className="card">
                                                <Typography variant="body2">总分析数</Typography>
                                                <Typography variant="h5">
                                                    {stats.totalAnalysis || 0}
                                                </Typography>
                                            </div>
                                        </Grid>
                                        <Grid item xs={12} md={3}>
                                            <div className="card">
                                                <Typography variant="body2">关键词分析</Typography>
                                                <Typography variant="h5">
                                                    {stats.keywordAnalysis || 0}
                                                </Typography>
                                            </div>
                                        </Grid>
                                        <Grid item xs={12} md={3}>
                                            <div className="card">
                                                <Typography variant="body2">观点分析</Typography>
                                                <Typography variant="h5">
                                                    {stats.pointAnalysis || 0}
                                                </Typography>
                                            </div>
                                        </Grid>
                                        <Grid item xs={12} md={3}>
                                            <div className="card">
                                                <Typography variant="body2">事件分析</Typography>
                                                <Typography variant="h5">
                                                    {stats.eventAnalysis || 0}
                                                </Typography>
                                            </div>
                                        </Grid>
                                    </Grid>
                                </CardContent>
                            </Card>

                            {/* 列表模块 */}
                            <Card className="card">
                                <CardHeader 
                                    title="分析结构列表" 
                                    titleTypographyProps={{ variant: 'h6' }}
                                />
                                <CardContent>
                                    <TableContainer component={Paper}>
                                        <Table className="data-table">
                                            <TableHead>
                                                <TableRow>
                                                    <TableCell>
                                                        <TableSortLabel
                                                            active={sortConfig.key === 'id'}
                                                            direction={sortConfig.direction}
                                                            onClick={() => handleSort('id')}
                                                        >
                                                            ID
                                                        </TableSortLabel>
                                                    </TableCell>
                                                    <TableCell>内容事件</TableCell>
                                                    <TableCell>关键词</TableCell>
                                                    <TableCell>权重</TableCell>
                                                    <TableCell>
                                                        <TableSortLabel
                                                            active={sortConfig.key === 'create_at'}
                                                            direction={sortConfig.direction}
                                                            onClick={() => handleSort('create_at')}
                                                        >
                                                            创建时间
                                                        </TableSortLabel>
                                                    </TableCell>
                                                    <TableCell>操作</TableCell>
                                                </TableRow>
                                            </TableHead>
                                            <TableBody>
                                                {loading ? (
                                                    <TableRow>
                                                        <TableCell colSpan={6} align="center">
                                                            <div className="loading">
                                                                <div className="loading-spinner"></div>
                                                            </div>
                                                        </TableCell>
                                                    </TableRow>
                                                ) : analysisList.length === 0 ? (
                                                    <TableRow>
                                                        <TableCell colSpan={6} align="center">
                                                            <div className="empty-state">
                                                                <div className="empty-icon">
                                                                    <span className="material-icons">inbox</span>
                                                                </div>
                                                                <div className="empty-text">暂无数据</div>
                                                            </div>
                                                        </TableCell>
                                                    </TableRow>
                                                ) : (
                                                    analysisList.map((item) => (
                                                        <TableRow key={item.id}>
                                                            <TableCell>{item.id}</TableCell>
                                                            <TableCell>
                                                                <Tooltip title={item.content_event || '无事件数据'}>
                                                                    <Typography 
                                                                        variant="body2" 
                                                                        sx={{ 
                                                                            maxWidth: '300px', 
                                                                            overflow: 'hidden', 
                                                                            textOverflow: 'ellipsis', 
                                                                            whiteSpace: 'nowrap' 
                                                                        }}
                                                                    >
                                                                        {item.content_event || '-'}
                                                                    </Typography>
                                                                </Tooltip>
                                                            </TableCell>
                                                            <TableCell>
                                                                {item.keyword || item.content_point || item.content_event || '-'}
                                                            </TableCell>
                                                            <TableCell>
                                                                <Chip 
                                                                    label={`${getWeightLabel(item.keyword_weight || item.content_point_weight || item.content_event_weight)} (${item.keyword_weight || item.content_point_weight || item.content_event_weight || 0}%)`}
                                                                    color={getWeightColor(item.keyword_weight || item.content_point_weight || item.content_event_weight)}
                                                                    size="small"
                                                                />
                                                            </TableCell>
                                                            <TableCell>{formatDate(item.create_at)}</TableCell>
                                                            <TableCell>
                                                                <Tooltip title="查看详情">
                                                                    <IconButton 
                                                                        onClick={() => handleViewDetail(item)}
                                                                        style={{ color: 'rgb(144, 202, 249)' }}
                                                                    >
                                                                        <span className="material-icons">visibility</span>
                                                                    </IconButton>
                                                                </Tooltip>
                                                                <Tooltip title="删除">
                                                                    <IconButton 
                                                                        onClick={() => handleDelete(item.id)}
                                                                        style={{ color: 'rgb(239, 154, 154)' }}
                                                                    >
                                                                        <span className="material-icons">delete</span>
                                                                    </IconButton>
                                                                </Tooltip>
                                                            </TableCell>
                                                        </TableRow>
                                                    ))
                                                )}
                                            </TableBody>
                                        </Table>
                                    </TableContainer>
                                </CardContent>
                            </Card>

                            {/* 分页模块 */}
                            <Box display="flex" justifyContent="space-between" alignItems="center" mt={2}>
                                <Typography variant="body2">
                                    共 {total} 条记录，第 {page} 页，每页 
                                    <Select 
                                        value={pageSize} 
                                        onChange={handlePageSizeChange}
                                        style={{ margin: '0 5px' }}
                                    >
                                        <MenuItem value={5}>5</MenuItem>
                                        <MenuItem value={10}>10</MenuItem>
                                        <MenuItem value={20}>20</MenuItem>
                                        <MenuItem value={50}>50</MenuItem>
                                    </Select>
                                    条
                                </Typography>
                                <Pagination 
                                    count={Math.ceil(total / pageSize)} 
                                    page={page} 
                                    onChange={handlePageChange} 
                                    color="primary" 
                                />
                            </Box>
                        </div>
                    </main>

                    {/* 统一的页脚 */}
                    <footer className="footer">
                        <div className="container footer-content">
                            <div className="footer-copyright">
                                ? 2023 盖世数据智能分析平台. 保留所有权利.
                            </div>
                            <ul className="footer-links">
                                <li><a href="#">隐私政策</a></li>
                                <li><a href="#">使用条款</a></li>
                                <li><a href="#">联系我们</a></li>
                            </ul>
                        </div>
                    </footer>

                    {/* 详情弹窗 */}
                    <Dialog
                        open={detailDialogOpen}
                        onClose={handleCloseDetailDialog}
                        maxWidth="xl"
                        fullWidth
                        PaperProps={{
                            style: {
                                width: '90%',
                                maxWidth: '1440px',
                                height: '85vh',
                                maxHeight: '85vh',
                                borderRadius: '12px',
                                overflow: 'hidden'
                            }
                        }}
                    >
                        <DialogTitle>
                            分析详情
                        </DialogTitle>
                        <DialogContent>
                            {selectedAnalysis && selectedContent && (
                                <>
                                    <Tabs value={tabValue} onChange={handleTabChange} aria-label="详情标签页">
                                        <Tab label="分析结果" id="tab-0" />
                                        <Tab label="原始内容" id="tab-1" />
                                    </Tabs>
                                    
                                    <Box sx={{ mt: 2 }}>
                                        {tabValue === 0 && (
                                            <Grid container spacing={3}>
                                                {/* 左侧：分析基本信息 */}
                                                <Grid item xs={12} md={4}>
                                                    <Card variant="outlined" sx={{ height: '100%' }}>
                                                        <CardContent>
                                                            <Typography variant="h6" gutterBottom>分析基本信息</Typography>
                                                            <Divider sx={{ mb: 2 }} />
                                                            <Grid container spacing={2}>
                                                                <Grid item xs={12}>
                                                                    <Box sx={{ mb: 2 }}>
                                                                        <Typography variant="subtitle2" color="textSecondary">分析ID</Typography>
                                                                        <Typography variant="body1">{selectedAnalysis.id}</Typography>
                                                                    </Box>
                                                                </Grid>
                                                                <Grid item xs={12}>
                                                                    <Box sx={{ mb: 2 }}>
                                                                        <Typography variant="subtitle2" color="textSecondary">创建时间</Typography>
                                                                        <Typography variant="body1">{formatDate(selectedAnalysis.create_at)}</Typography>
                                                                    </Box>
                                                                </Grid>
                                                                <Grid item xs={12}>
                                                                    <Box sx={{ mb: 2 }}>
                                                                        <Typography variant="subtitle2" color="textSecondary">修改时间</Typography>
                                                                        <Typography variant="body1">{formatDate(selectedAnalysis.modify_at)}</Typography>
                                                                    </Box>
                                                                </Grid>
                                                                <Grid item xs={12}>
                                                                    <Box sx={{ mb: 2 }}>
                                                                        <Typography variant="subtitle2" color="textSecondary">内容标题</Typography>
                                                                        <Typography variant="body1">{selectedContent.title}</Typography>
                                                                    </Box>
                                                                </Grid>
                                                            </Grid>
                                                        </CardContent>
                                                    </Card>
                                                </Grid>
                                                
                                                {/* 右侧：分析内容详情 */}
                                                <Grid item xs={12} md={8}>
                                                    <Card variant="outlined" sx={{ height: '100%' }}>
                                                        <CardContent>
                                                            <Typography variant="h6" gutterBottom>分析内容详情</Typography>
                                                            <Divider sx={{ mb: 2 }} />
                                                            
                                                            <Accordion defaultExpanded>
                                                                <AccordionSummary expandIcon={<span className="material-icons">expand_more</span>}>
                                                                    <Typography variant="subtitle1">关键词分析</Typography>
                                                                </AccordionSummary>
                                                                <AccordionDetails>
                                                                    <Grid container spacing={2}>
                                                                        <Grid item xs={12} md={8}>
                                                                            <Typography variant="subtitle2" color="textSecondary">关键词内容</Typography>
                                                                            <Typography variant="body1" sx={{ wordBreak: 'break-word' }}>
                                                                                {selectedAnalysis.keyword || '无关键词数据'}
                                                                            </Typography>
                                                                        </Grid>
                                                                        <Grid item xs={12} md={4}>
                                                                            <Typography variant="subtitle2" color="textSecondary">关键词权重</Typography>
                                                                            <Chip 
                                                                                label={`${getWeightLabel(selectedAnalysis.keyword_weight)} (${selectedAnalysis.keyword_weight || 0}%)`}
                                                                                color={getWeightColor(selectedAnalysis.keyword_weight)}
                                                                                size="small"
                                                                            />
                                                                        </Grid>
                                                                    </Grid>
                                                                </AccordionDetails>
                                                            </Accordion>
                                                            
                                                            <Accordion defaultExpanded>
                                                                <AccordionSummary expandIcon={<span className="material-icons">expand_more</span>}>
                                                                    <Typography variant="subtitle1">观点分析</Typography>
                                                                </AccordionSummary>
                                                                <AccordionDetails>
                                                                    <Grid container spacing={2}>
                                                                        <Grid item xs={12} md={8}>
                                                                            <Typography variant="subtitle2" color="textSecondary">观点内容</Typography>
                                                                            <Typography variant="body1" sx={{ wordBreak: 'break-word' }}>
                                                                                {selectedAnalysis.content_point || '无观点数据'}
                                                                            </Typography>
                                                                        </Grid>
                                                                        <Grid item xs={12} md={4}>
                                                                            <Typography variant="subtitle2" color="textSecondary">观点权重</Typography>
                                                                            <Chip 
                                                                                label={`${getWeightLabel(selectedAnalysis.content_point_weight)} (${selectedAnalysis.content_point_weight || 0}%)`}
                                                                                color={getWeightColor(selectedAnalysis.content_point_weight)}
                                                                                size="small"
                                                                            />
                                                                        </Grid>
                                                                    </Grid>
                                                                </AccordionDetails>
                                                            </Accordion>
                                                            
                                                            <Accordion defaultExpanded>
                                                                <AccordionSummary expandIcon={<span className="material-icons">expand_more</span>}>
                                                                    <Typography variant="subtitle1">事件分析</Typography>
                                                                </AccordionSummary>
                                                                <AccordionDetails>
                                                                    <Grid container spacing={2}>
                                                                        <Grid item xs={12} md={8}>
                                                                            <Typography variant="subtitle2" color="textSecondary">事件内容</Typography>
                                                                            <Typography variant="body1" sx={{ wordBreak: 'break-word' }}>
                                                                                {selectedAnalysis.content_event || '无事件数据'}
                                                                            </Typography>
                                                                        </Grid>
                                                                        <Grid item xs={12} md={4}>
                                                                            <Typography variant="subtitle2" color="textSecondary">事件权重</Typography>
                                                                            <Chip 
                                                                                label={`${getWeightLabel(selectedAnalysis.content_event_weight)} (${selectedAnalysis.content_event_weight || 0}%)`}
                                                                                color={getWeightColor(selectedAnalysis.content_event_weight)}
                                                                                size="small"
                                                                            />
                                                                        </Grid>
                                                                    </Grid>
                                                                </AccordionDetails>
                                                            </Accordion>
                                                        </CardContent>
                                                    </Card>
                                                </Grid>
                                            </Grid>
                                        )}
                                        
                                        {tabValue === 1 && (
                                            <Grid container spacing={3}>
                                                {/* 左侧：基本信息+AI评论 */}
                                                <Grid item xs={12} md={4}>
                                                    <Card variant="outlined" sx={{ height: '100%' }}>
                                                        <CardContent>
                                                            <Typography variant="h6" gutterBottom>原始内容信息</Typography>
                                                            <Divider sx={{ mb: 2 }} />
                                                            <Grid container spacing={2}>
                                                                <Grid item xs={12}>
                                                                    <Box sx={{ mb: 2 }}>
                                                                        <Typography variant="subtitle2" color="textSecondary">内容标题</Typography>
                                                                        <Typography variant="body1">{selectedContent.title}</Typography>
                                                                    </Box>
                                                                </Grid>
                                                                <Grid item xs={12}>
                                                                    <Box sx={{ mb: 2 }}>
                                                                        <Typography variant="subtitle2" color="textSecondary">来源站点</Typography>
                                                                        <Typography variant="body1">{selectedContent.site_title}</Typography>
                                                                    </Box>
                                                                </Grid>
                                                                <Grid item xs={12}>
                                                                    <Box sx={{ mb: 2 }}>
                                                                        <Typography variant="subtitle2" color="textSecondary">内容创建时间</Typography>
                                                                        <Typography variant="body1">{formatDate(selectedContent.content_create_at)}</Typography>
                                                                    </Box>
                                                                </Grid>
                                                            </Grid>
                                                            
                                                            {selectedContent.comment && (
                                                                <>
                                                                    <Typography variant="h6" gutterBottom>AI评论</Typography>
                                                                    <Divider sx={{ mb: 2 }} />
                                                                    <Box 
                                                                        sx={{ 
                                                                            backgroundColor: '#e3f2fd', 
                                                                            p: 2, 
                                                                            borderRadius: 1,
                                                                            borderLeft: '4px solid #2196f3'
                                                                        }}
                                                                    >
                                                                        <Typography variant="body1" sx={{ whiteSpace: 'pre-wrap' }}>
                                                                            {selectedContent.comment}
                                                                        </Typography>
                                                                    </Box>
                                                                </>
                                                            )}
                                                        </CardContent>
                                                    </Card>
                                                </Grid>
                                                
                                                {/* 右侧：内容详情 */}
                                                <Grid item xs={12} md={8}>
                                                    <Card variant="outlined" sx={{ height: '100%' }}>
                                                        <CardContent>
                                                            <Typography variant="h6" gutterBottom>内容详情 (Markdown渲染)</Typography>
                                                            <Divider sx={{ mb: 2 }} />
                                                            <Box 
                                                                sx={{ 
                                                                    backgroundColor: '#f5f5f5', 
                                                                    p: 3, 
                                                                    borderRadius: 1, 
                                                                    maxHeight: '60vh', 
                                                                    overflowY: 'auto',
                                                                    overflowX: 'hidden',
                                                                    fontFamily: 'Roboto, sans-serif',
                                                                    fontSize: '1rem',
                                                                    lineHeight: 1.6,
                                                                    '& h1': { fontSize: '2rem', fontWeight: 'bold', mb: 1 },
                                                                    '& h2': { fontSize: '1.5rem', fontWeight: 'bold', mb: 1 },
                                                                    '& h3': { fontSize: '1.25rem', fontWeight: 'bold', mb: 1 },
                                                                    '& p': { mb: 1 },
                                                                    '& strong': { fontWeight: 'bold' },
                                                                    '& em': { fontStyle: 'italic' },
                                                                    '& a': { color: '#0066CC', textDecoration: 'none' },
                                                                    '& a:hover': { textDecoration: 'underline' },
                                                                    '& img': { maxWidth: '100%', height: 'auto' },
                                                                    '& table': { maxWidth: '100%', wordWrap: 'break-word' },
                                                                    '& pre': { overflowX: 'auto' },
                                                                    '& code': { wordWrap: 'break-word' }
                                                                }}
                                                                dangerouslySetInnerHTML={renderMarkdown(selectedContent.content)}
                                                            />
                                                        </CardContent>
                                                    </Card>
                                                </Grid>
                                            </Grid>
                                        )}
                                    </Box>
                                </>
                            )}
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={handleCloseDetailDialog} color="primary">
                                关闭
                            </Button>
                        </DialogActions>
                    </Dialog>

                    {/* 提示消息 */}
                    <Snackbar
                        open={snackbar.open}
                        autoHideDuration={6000}
                        onClose={handleCloseSnackbar}
                    >
                        <Alert onClose={handleCloseSnackbar} severity={snackbar.severity}>
                            {snackbar.message}
                        </Alert>
                    </Snackbar>
                </div>
            );
        }

        // 渲染组件到页面
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
</body>

</html>